<template>
  <div id="login">
    <div class="title">
      <h1>数 字 鸽 业 精 准 管 控 云 服 务 平 台</h1>
    </div>
    <div class="box" :style="boxHeight">
      <el-tabs v-model="activeName" @tab-click="handleTabClick" :stretch="true">
        <!-- 表单区域 -->
        <el-tab-pane label="密码登录" name="passwordLogin">
          <TheForm :callback="handleSubmit" :options="['phone', 'password', 'captcha']" ref="passwordLogin"></TheForm>
        </el-tab-pane>
        <el-tab-pane label="短信登录" name="messageLogin">
          <TheForm :callback="handleSubmit"></TheForm>
        </el-tab-pane>
      </el-tabs>
      <div style="display: flex; justify-content: flex-end; margin-right:15px;">
        <router-link to="/forgetPassword" style="font-size: 14px;color:#999;">忘记密码</router-link>
        <el-divider direction="vertical"></el-divider>
        <router-link to="/register" style="font-size: 14px;color:#999;">注册</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { getDerviceToken } from '../../api/Dervice/Device'
import TheForm from '../../components/Login/TheForm'
import { mapState, mapActions } from 'vuex'
import {
  PasswordLogin,
  // gethead
} from '../../api/login/index'
export default {
  name: 'login',
  components: {
    TheForm,
  },
  props: {},
  data() {
    return {
      // 默认登录方式
      activeName: 'passwordLogin',
      // 切换登录方式设置背景高度
      boxHeight: 'height:390px',

      token: undefined,
    }
  },
  computed: {
    ...mapState(['userPermissions']),
  },
  methods: {
    ...mapActions(['saveUserPermissions', 'saveUserInfo', 'saveUserMenuAndRouteData']),
    // 切换登录方式
    handleTabClick(tab) {
      // console.log("tab: ", tab);
      this.activeName = tab.name
      // if (tab.name === "passwordLogin") {
      //   this.boxHeight = "height:440px";
      // } else {
      //   this.boxHeight = "height:390px";
      // }
    },
    // handleSubmit(form){
    //   console.log(form);
    //   this.$router.push("/ProductionManage/BreedingBase");
    // },

    // 向登录接口发起请求
    async handleSubmit(form) {
      // console.log("form: ", form);
      let { code, phone, captcha, password } = form

      // 密码登录
      if (this.activeName === 'passwordLogin') {
        // 调用登录接口
        var { data: res, headers } = await PasswordLogin({
          captcha,
          phone,
          password,
        })

        // console.log("res", res, "hesders", headers);
      } else {
        var { data: res, headers } = await SmsLogin({ phone, code })
        // console.log("res", res, "hesders", headers);
      }

      // 若登录成功执行以下
      if (res.statusCode === 20000) {
        // 保存 token
        sessionStorage.setItem('token', headers.token)

        // action 获取登录用户所能访问菜单
        this.saveUserMenuAndRouteData()

        // action 获取登录用户权限信息
        this.saveUserPermissions()

        // action 保存用户信息
        this.saveUserInfo()

        // 保存 DerviceToken
        getDerviceToken().then((res) => {
          const { token: DerviceToken } = res.data.data
          window.sessionStorage.setItem('DerviceToken', DerviceToken)
        })

        this.$message.success(res.message)
        this.$router.push('/Navigation')
      } else {
        // this.$refs.passwordLogin.getCaptcha();
        this.$message.error(res.message)
        console.error(res.message)
        if (res.message == '验证码输入错误') {
          this.sendCode()
        }
      }
    },
  },
  mounted() {
    if (this.activeName === 'passwordLogin') {
      this.$refs.passwordLogin.getCaptcha()
    }
    // 清除主题
    document.body.className = ''
  },
}
</script>
<style lang="scss" scoped>
$login-text-color: #0afefc; //定义变量

#login {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url('../../assets/image/login.jpg') no-repeat;
  background-size: cover;
}

.title {
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
  padding: 50px 0;
  // position: absolute;
  // top: 15%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  h1 {
    margin: 0 0 30px;
    /* color: rgb(245, 243, 243); */
    text-align: center;
    font-size: 40px;
    display: inline;
    white-space: nowrap;

    background: linear-gradient(to right, #0043a2, #dbfeff);
    -webkit-background-clip: text;
    color: transparent;
  }
}
/deep/.box {
  margin: 0 auto;
  width: 380px;
  padding: 50px 35px 0 45px;
  box-sizing: border-box;
  border-radius: 10px; /*登录窗口边角圆滑*/
  position: absolute;
  top: 26%;
  right: 90px;
  background: url(https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/1329/login.png)
    no-repeat;
  background-size: 100%;
  .el-tabs__item {
    // background-color: transparent;
    /* color: rgba(0, 0, 0, 0.589); */
    height: 40px;
    font-size: 16px;
  }
  .is-active {
    color: $login-text-color;
  }
  .el-tabs__active-bar {
    background-color: $login-text-color;
  }
  .el-input__inner {
    background-color: transparent;
    /* color: rgb(5, 5, 5); */
    font-size: 10px;
    color: $login-text-color;
    border-color: $login-text-color;
  }
  .el-form {
    margin: 10px 0px;
    .el-form-item {
      .login {
        margin-top: 15px;
        margin-left: -40px;
        width: 105%;
        height: 40px;
        font-size: 18px;
      }
      .el-form-item__label,
      .el-icon-mobile-phone,
      .el-icon-lock,
      .el-icon-view {
        color: $login-text-color;
      }
      .captcha {
        width: 50%;
        float: left;
      }
      img {
        width: 45%;
        position: relative;
        display: block;
        left: -1%;
        float: right;
        height: 40px;
      }
    }
  }
  .el-tabs__nav-wrap::after {
    color: $login-text-color;
  }
}

/deep/.el-tabs__item {
  color: #fff;
}
</style>
